<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:45
 * @Description: 周边省份价格对比放大modal
-->
<template>
  <div class="right-top">
    <com-box :title="title" class="com-box-title">
      <template #titleLeft>
        <div class="table-left-text" v-if="topData.unit">
          单位：{{ topData.unit }}
        </div>
      </template>
      <loading v-show="loading" />
      <div class="jgdb-box">
        <div v-if="showMsg !== ''" class="jgdb-msg">
          {{ showMsg }}
        </div>
        <div v-if="showMsg === ''" class="jgdb-til">
          <span class="til-jg">
            <span v-if="topData.exeno">期号 : {{ topData.exeno }}</span>
            <span class="til-jg-span">
              {{ topData.areaName }}&nbsp;:&nbsp;
              <span v-show="topData.price"
                >{{ topData.price }}{{ topData.unit }}</span
              >
              <span v-show="!topData.price">无</span>
            </span>
          </span>
          <span class="til-sort" v-show="topData.sort"
            >{{ topData.sort }}名</span
          >
          <span class="til-sort" v-show="!topData.sort">无排名</span>
          <span class="til-avg"> 平均 : {{ topData.avg }} </span>
          <span class="til-top">
            <span>最高 : {{ topData.max }}</span>
            <span>最低 : {{ topData.min }}</span>
          </span>
        </div>
        <div v-if="showMsg === ''" class="jgdb-btm">
          <charts :params="params"></charts>
        </div>
      </div>
    </com-box>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
import { gradientColor } from '@/charts/utils'

interface IState {
  title: string
  topData: any
  showMsg: string
  loading: boolean
  params: any
  getData: (goodsId: string) => void
}

export default defineComponent({
  name: 'rightTopModal',
  components: {
    comBox,
    loading
  },
  props: {
    goodsId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state: IState = reactive({
      title: '-',
      topData: {},
      showMsg: '',
      loading: false,
      params: {
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          grid: {
            left: '10',
            top: '27',
            bottom: '2'
          },
          legend: {
            show: false
          },
          xAxis: [
            {
              type: 'category',
              interval: 0,
              axisLabel: {
                fontSize: 14 * 1.9,
                color: '#fff'
              }
            }
          ],
          yAxis: [
            {
              show: true,
              axisLabel: {
                fontSize: 14 * 1.9,
                color: '#fff'
              }
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: 15 * 1.9,
              markLine: {
                symbol: 'none',
                label: {
                  show: false
                },
                data: [
                  {
                    name: '平均值',
                    type: 'average',
                    yAxis: 100
                  }
                ],
                lineStyle: {
                  type: 'dashed',
                  color: '#EB6F06'
                }
              }
            }
          ]
        }
      },
      getData: (goodsId) => {
        state.loading = true
        httpRequest
          .get({ url: 'M2P2Zbjsdb', params: { goodsId } })
          .then((res) => {
            state.title = res.title ? res.title : '-'
            state.showMsg = ''
            if (res.showMessage && String(res.showMessage).length > 0) {
              state.showMsg = res.showMessage
            } else {
              state.params.loading = true
              const arrValue = res.data.map((i: any) => i.value)
              state.topData.max = Math.max.apply(null, arrValue)
              state.topData.min = Math.min.apply(null, arrValue)
              state.topData.areaName = res.areaName
              state.topData.unit = res.unit
              state.topData.exeno = res.exeno
              state.params.options.yAxis[0].min = res.min || 0
              state.params.options.yAxis[0].name = []

              state.topData.avg = (
                eval(arrValue.join('+')) / arrValue.length
              ).toFixed(1)
              state.params.options.series[0].markLine.data[0].yAxis =
                state.topData.avg
              const resData = JSON.parse(JSON.stringify(res.data))

              resData.sort((a: any, b: any) => b.value - a.value)
              resData.some((item: any, index: number) => {
                if (item.name === res.areaName) {
                  state.topData.price = item.value
                  state.topData.sort = index + 1
                  return true
                }
              })

              state.params.options.series[0].itemStyle = {
                color: (item: any) => {
                  if (item.name === res.areaName) {
                    return gradientColor(['#efde1f', '#ea690a'])
                  } else {
                    return gradientColor(['#0b3ee3', '#0aeadd'])
                  }
                }
              }
              state.params.options.series[0].label = {
                show: true,
                color: '#efdd1f',
                position: 'top',
                formatter: (item: any) => {
                  if (item.name === res.areaName) {
                    return item.data.value
                  } else {
                    return ''
                  }
                }
              }
              state.params.options.dataset.source = res.data
              setTimeout(() => {
                state.params.loading = false
              })
            }
            state.loading = false
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })

    watch(
      () => props.goodsId,
      (newVal) => {
        if (newVal) {
          state.getData(newVal)
        }
      }
    )

    state.getData(props.goodsId)

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
@MX: 1.9; // 放大倍数

.right-top {
  width: 620px * @MX;
  height: 370px * @MX;
  overflow: hidden;

  .com-box-title {
    ::v-deep(.com-header) {
      height: 45px * @MX;
    }
    ::v-deep(.title) {
      font-size: 20px * @MX;
      line-height: 45px * @MX;
      background-size: 264px * @MX 45px * @MX;
      flex: 0 0 264px * @MX;
    }
  }

  .jgdb-box {
    padding: 20px * @MX;
    width: 100%;
    height: calc(100% - 45px * @MX);

    .jgdb-msg {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 31px * @MX;
      font-weight: bold;
      color: #ef7809;
    }

    .jgdb-til {
      margin: 7px * @MX 5px * @MX;
      padding: 6px * @MX 0px;
      background-color: #0f408d;
      font-size: 14px * @MX;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      font-weight: bold;

      .til-jg {
        color: #9efffd;
        span {
          display: block;
        }
        .til-jg-span {
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
      .til-sort {
        color: #9efffd;
      }
      .til-avg {
        color: #ffee2d;
      }
      .til-top {
        color: #09fff6;
        span {
          display: block;
        }
        span:nth-child(1) {
          color: rgb(255, 38, 38);
        }
        span:nth-child(2) {
          color: rgb(66, 255, 0);
        }
      }
    }

    .jgdb-btm {
      height: calc(100% - 80px * @MX);
      display: flex;
      align-items: flex-end;
    }
  }

  .table-left-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 14px * @MX;
    font-weight: bold;
    color: #9efffd;
  }
}
</style>
